<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Cropper from "./Cropper.svelte";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import { Input } from "../Input";
    import { RadioGroup } from "../RadioGroup";
    import img from "../../assets/carousel/1.jpg";
    import { Slider } from "../Slider";
    import type { CropperProps } from "./Cropper";

    const { Story } = defineMeta({
        title: "Components/Views/Cropper",
        component: Cropper,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let type = $state<CropperProps["shape"]>("rect");
    let cropper: any;
    let rotate = $state(0);
    let zoom = $state(1);
</script>

<Story name="Default">
    {#snippet template(args)}
        <RadioGroup
            bind:value={type}
            data={[
                { label: "rect", value: "rect" },
                { label: "round", value: "round" },
                { label: "roundRect", value: "roundRect" },
            ]}
        />
        <Cropper bind:this={cropper} aspectRatio={0.8} src={img} {rotate} {zoom} style="width: 550px; height: 300px; margin: 20px" shape={type} onzoomchange={(z) => (zoom = z)} />
        <Slider min={0} max={360} bind:value={rotate} />
        <Slider min={0.1} max={3} bind:value={zoom} step={0.1} />
        <div id="preview-cropper-box"></div>
        <Button
            type="primary"
            onclick={() => {
                const canvas = cropper.getCropperCanvas();
                const previewContainer = document.getElementById("preview-cropper-box");
                if (previewContainer) {
                    previewContainer.innerHTML = "";
                    previewContainer.appendChild(canvas);
                }
            }}>剪切</Button
        >
    {/snippet}
</Story>
